<div class="container justify-content-center">
        <!-- -->
        <div class="form-group row justify-content-center col-12">
            <div class="row col-12">
                <h1>Ajax XHR Demo</h1>
            </div>

                <!-- Nav pills -->
            <div class="row col-12">
                    <ul class="nav nav-pills" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="pill" href="#sectionA">Get 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#sectionB">Get 2</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#sectionC">Post</a>
                            </li>
                    </ul>
            </div>


            <div class="row col-12">
                <div class="row" style="height:25px;"></div>
                    
            <!-- Tab panes -->
            <div class="tab-content">
                    <div id="sectionA" class="container tab-pane active">
                        <br>
                        <div class="row">
                            <div class="col-12">
                                Route Path:&ensp;/democontroller/movies &ensp; (Restful Service in Local Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="httpGet1Run()">Run</button>
                            </div>
                            <div style="height:100px;"></div>
                            <div class="col-12">
                                <div class='table-responsive'>
                                    <table class='table'>
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Title</th>
                                                <th>Year</th>
                                                <th>Votes</th>
                                                <th>Rating</th>
                                                <th>Date</th>
                                                <th>RestfulAssembly</th>
                                            </tr>
                                        </thead>
                                         <tbody tr *ngFor="let item of _httpGet1Result">
                                            <tr>
                                                <th>{{ item.Id }}</th>
                                                <th>{{ item.Title }}</th>
                                                <th>{{ item.Year }}</th>
                                                <th>{{ item.Votes }}</th>
                                                <th>{{ item.Rating }}</th>
                                                <th>{{ item.Date }}</th>
                                                <th>{{ item.RestfulAssembly }}</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="sectionB" class="container tab-pane fade">
                        <br>
                        <div class="row">
                            <div class="col-12">
                                Route Path:&ensp;/externalcontroller/movies &ensp;(Restful Service in External Assembly)&ensp;<button  type="button" class="btn btn-primary btn-sm" (click)="httpGet2Run()">Run</button>
                            </div>
                            <div style="height:100px;"></div>
                            <div class="col-12">
                                <div class='table-responsive'>
                                    <table class='table'>
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Title</th>
                                                <th>Year</th>
                                                <th>Votes</th>
                                                <th>Rating</th>
                                                <th>Date</th>
                                                <th>RestfulAssembly</th>
                                            </tr>
                                        </thead>
                                        <tbody tr *ngFor="let item of _httpGet2Result">
                                            <tr>
                                                <th>{{ item.Id }}</th>
                                                <th>{{ item.Title }}</th>
                                                <th>{{ item.Year }}</th>
                                                <th>{{ item.Votes }}</th>
                                                <th>{{ item.Rating }}</th>
                                                <th>{{ item.Date }}</th>
                                                <th>{{ item.RestfulAssembly }}</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="sectionC" class="container tab-pane fade">
                        <br>
                        <div class="row">
                            <div class="col-12">
                                Route Path:&ensp;/democontroller/movies&ensp;(Restful Service in Local Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="httpPostRun()">Run</button>
                            </div>
                            <div style="height:100px;"></div>
                            <div class="col-12">
                                 <div>{{ _httpPostResult }}</div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
            
</div>